<template>
    <div class="order-info">
        <MyHead :myHead="orderData"></MyHead>
        <div class="container">
            <Address :address="orderData"></Address>
            <Card :show="false" :item="orderData"></Card>
            <div class="mode flex bor f14 b">
                <span>租赁方式</span>
                <span class="grey">{{ orderData.pact_type_name }}</span>
            </div>
            <DownPayments class="b" :detailHandle="BillingDetails" :isShow="false" :payments="orderData"></DownPayments>
            <div class="deposit bor b ">
                <div class="head b">
                    <span class="f15">押金</span>
                </div>
                <div class="all-price f14">
                    <div class="item flex">
                        <span>商品押金</span>
                        <span>￥{{ orderData.setmeal_foregift }}</span>
                    </div>
                </div>
            </div>
            <div class="remarks f14 bor b">
                <span>备注</span>
                <input type="text" :value="orderData.remarks" disabled="true">
            </div>
            <DoubleMiniCard pay="到期买断金额" :payDetail="`￥${orderData.buyout_amount}`" mode="配送方式"
                :modeDetail="orderData.convey_type">
            </DoubleMiniCard>
            <div class="agreement bor f14">
                <div class="item flex">
                    <span class="left">租赁协议</span>
                    <div class="right">
                        <span class="blue">查看协议</span>
                        <img class="more" src="@/assets/images/more.png">
                    </div>
                </div>
                <div class="item flex">
                    <span class="left">订单详细</span>
                    <div class="right" id="copy" :data-clipboard-text="orderData.trade_no" @click="copyOrderNumber">
                        <span class="grey">{{ orderData.trade_no }}</span>
                        <img class="copy" src="@/assets/images/copy.png">
                    </div>
                </div>
                <div class="item flex">
                    <span class="left">创建时间</span>
                    <span class="right grey">{{ orderData.create_time }}</span>
                </div>
            </div>
        </div>
        <loading v-show="!orderData.create_time"></loading>
    </div>
</template>
<script>
import Card from "@/components/Order/Card.vue";
import MyHead from "@/components/Order/MyHead.vue";
import Address from "@/components/Order/Address.vue";
import DownPayments from "@/components/Order/DownPayments.vue"
import DoubleMiniCard from "@/components/Order/DoubleMiniCard.vue";
import Clipboard from "clipboard";
export default {
    name: "OrderInfo",
    components: {
        MyHead,
        Card,
        Address,
        DownPayments,
        DoubleMiniCard
    },
    data() {
        return {
            orderData: {},
        }
    },
    created() {
        this.getOrderInfo();
    },
    methods: {
        getOrderInfo() {
            const { order_id } = this.$route.query;
            this.$sendGet("Order/orderInfo", { order_id })
                .then(res => {
                    const { data } = res.data;
                    this.orderData = data;
                })
        },
        BillingDetails(order_id) {
            this.$router.push({ name: "billing", query: { order_id } })
        },
        copyOrderNumber() {
            let clipboard = new Clipboard("#copy");
            clipboard.on("success", () => {
                this.$toast("复制订单号成功")
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                this.$toast("复制订单号失败")
                clipboard.destroy();
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.b {
    margin-bottom: 15px;
}

.bor {
    border-radius: 8px;
    overflow: hidden;
}

.order-info {
    background-color: #f7f7f7;
    min-height: 100vh;

    .container {
        padding: 15px;



        .mode {
            height: 50px;
            padding: 0 10px;
            background-color: white;
        }

        .deposit {
            padding: 10px;

            background-color: white;

            .head {
                span {
                    &:nth-of-type(2) {
                        color: #d13631;
                    }
                }
            }

            .all-price {
                background-color: #f9f9f9;
                padding: 10px;
                border-radius: 5px;

                .item {
                    &:nth-of-type(2) {
                        margin-top: 10px;
                    }

                    span {
                        color: #989898;
                    }
                }
            }
        }

        .remarks {
            padding: 15px 10px;
            background-color: white;
            display: flex;

            span {
                display: inline-block;
                width: 13%;
            }

            input {
                margin-left: 10px;
                border: 0;
                outline: 0;
                height: 100%;
                width: 87%;
                background-color: transparent;
            }
        }

        .agreement {
            padding: 20px 10px;
            background-color: white;

            .item {
                &:nth-of-type(2) {
                    margin: 10px 0;
                }

                .right {
                    display: flex;
                    align-items: center;

                    .blue {
                        color: #387ad4;
                    }

                    img {
                        margin-left: 5px;
                    }

                    .more {
                        width: 8px;
                    }

                    .copy {
                        width: 16px;
                    }
                }
            }
        }
    }
}
</style>